<template>
  <div id="wrap">
    <h1>命名视图</h1>

    <!-- 命名视图 -->
    <RouterView
      name="header"
      class="header"
      :to="{ name: 'StuDemo56Son02', params: { id: 1} }"
    ></RouterView
    ><br />

    <!-- 默认视图 -->
    <RouterView
      class="body"
      :to="{ name: 'StuDemo56Son02', params: { id: 2} }"
    ></RouterView
    ><br />

    <!-- 命名视图 -->
    <RouterView
      name="footer"
      class="footer"
      :to="{ name: 'StuDemo56Son02', params: { id: 3} }"
    ></RouterView
    ><br />
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo57',
};
</script>

<script lang="ts" setup>
// import { ref } from 'vue';
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 30vh;
  background-color: red;
}
.body {
  width: 100%;
  height: 40vh;
  background-color: blue;
}
.footer {
  width: 100%;
  height: 20vh;
  background-color: yellow;
}
</style>
